<html>
	<head>
		<meta name="layout" content="main"/>
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'gallery.css')}" type="text/css">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.fancybox.css')}" type="text/css">
		<script src="../js/jquery.fancybox.js" type="text/javascript"></script>
	
		<!-- Add mousewheel plugin (this is optional) -->
		<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
	
		<!-- Add fancyBox main JS and CSS files -->
		<script type="text/javascript" src="../js/jquery.fancybox.js"></script>
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.fancybox.css')}" type="text/css">
	
		<!-- Add Button helper (this is optional) -->
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.fancybox-buttons.css')}" type="text/css">
		<script type="text/javascript" src="../js/jquery.fancybox-buttons.js"></script>
	
		<!-- Add Thumbnail helper (this is optional) -->
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.fancybox-thumbs.css')}" type="text/css">
		<script type="text/javascript" src="../js/jquery.fancybox-thumbs.js"></script>
	
		<!-- Add Media helper (this is optional) -->
		<script type="text/javascript" src="../js/jquery.fancybox-media.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function () {
				$(".thumbnail-image").attr('rel', 'gallery').fancybox({
					padding : 0,
					closeBtn : false,
			    	openEffect : 'fade',
			    	closeEffect	: 'fade',
			    	openOpacity : false,
			    	closeOpacity : false,
			    	helpers	: {
						title	: {
							type: 'outside'
						},
						thumbs	: {
							width	: 50,
							height	: 50
						}
					}
			    });
			});
		</script>
	</head>
	<body>
		<div class="page-content">
			<div class="project-name">${ galleryProject?.project?.name }</div>
			${ galleryProject?.project?.description }
		</div>
		<div class="page-content">
			<div class="thumbnail-image-group">
				<table>
					<g:each in="${ galleryProject.imageRows }" var="row">
						<tr>
							<g:each in="${ row }" var="image">
								<td>
									<div>
										<a class="thumbnail-image" rel="thumbnail-image" href="<g:createLink controller="gallery" action="getImageByPath" params="[imagePath: image.imagePath]"/>">
											<img src="<g:createLink controller="gallery" action="getImageByPath" params="[imagePath: image.thumbnailPath]"/>" />
										</a>
									</div>
								</td>
							</g:each>
						</tr>
					</g:each>
				</table>
			</div>
			<g:link style="float: right;" class="red-button" controller="gallery" action="gallery">Return to Gallery</g:link>
		</div>
	</body>
</html>